<template>
  <div id="reg">
    <div class="nav">
      <p>意向登记</p>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>招商管理</el-breadcrumb-item>
        <el-breadcrumb-item>过程管理</el-breadcrumb-item>
        <el-breadcrumb-item>意向登记</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 搜索 -->
    <div class="head">
      <el-input
        v-model="searchData.projectName"
        placeholder="项目名称"
      ></el-input>
      <el-select
        v-model="searchData.business"
        filterable
        placeholder="行业大类"
      >
        <el-option
          v-for="item in options5"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="searchData.sourceWay"
        filterable
        placeholder="来源方式"
      >
        <el-option
          v-for="item in options6"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-date-picker
        v-model="searchData.date"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button
        type="primary"
        class="search"
        icon="el-icon-search"
        @click="search"
        >搜索</el-button
      >
      <el-button
        type="primary"
        class="reset"
        icon="el-icon-refresh"
        @click="reset"
        >重置</el-button
      >
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="nav-list">
        <p class="list">查询结果列表</p>
        <el-button type="primary" class="add" @click="addOpen">登记</el-button>
      </div>
      <el-table :data="tableData" stripe style="width: 100%" align="center">
        <el-table-column prop="id" label="序号" width="120" align="center">
        </el-table-column>
        <el-table-column
          prop="projectName"
          label="项目名称"
          align="center"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="area"
          label="所属地区"
          align="center"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="business"
          label="行业大类"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.business == 0 ? '商业服务' : '娱乐服务' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="registeredCapital"
          label="注册资本(万)"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="contact" label="联系人员" align="center">
        </el-table-column>
        <el-table-column prop="contactTel" label="联系方式" align="center">
        </el-table-column>
        <el-table-column prop="sourceWay" label="来源方式" align="center">
        </el-table-column>
        <el-table-column prop="startDate" label="登记时间" align="center">
          <template slot-scope="scope">
            <span>{{ timeTrans(scope.row.startDate, 1) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="acreage" label="申请办公面积" align="center">
        </el-table-column>
        <el-table-column prop="state" label="状态" align="center" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 0">待审核</span>
            <span v-if="scope.row.state == 1">已通过</span>
            <span v-if="scope.row.state == 2">已撤销</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <span
              style="color: #0bb197; margin-right: 10px"
              @click="see(scope.row)"
              >查看</span
            >
            <span
              v-if="scope.row.state == 0"
              @click="revoke(scope.row)"
              style="color: #0bb197"
              >撤销</span
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </div>

    <!-- 登记 -->
    <div class="addReg">
      <el-dialog title="意向登记" :visible.sync="addDialog" width="43%">
        <el-form :model="addData">
          <div class="form">
            <div>
              <el-form-item
                label="意向项目"
                :label-width="formLabelWidth"
              ></el-form-item>
              <el-select v-model="addData.intentionPlanId" placeholder="请选择">
                <el-option
                  v-for="(v, i) in options"
                  :key="i"
                  :label="v.label"
                  :value="v.value"
                ></el-option>
              </el-select>
              <el-form-item label="招商经理" :label-width="formLabelWidth">
              </el-form-item>
              <el-select v-model="addData.emp" placeholder="请选择">
                <el-option
                  v-for="(v, i) in options1"
                  :key="i"
                  :label="v.label"
                  :value="v.value"
                ></el-option>
              </el-select>
              <el-form-item label="合同类型" :label-width="formLabelWidth">
              </el-form-item>
              <el-select v-model="addData.contractType" placeholder="请选择">
                <el-option
                  v-for="(v, i) in options2"
                  :key="i"
                  :label="v.label"
                  :value="v.value"
                ></el-option>
              </el-select>
            </div>
            <div>
              <el-form-item label="负责部门" :label-width="formLabelWidth">
              </el-form-item>
              <el-select v-model="addData.dept" placeholder="请选择">
                <el-option
                  v-for="(v, i) in options3"
                  :key="i"
                  :label="v.label"
                  :value="v.value"
                ></el-option>
              </el-select>
              <el-form-item label="申请办公面积" :label-width="formLabelWidth">
              </el-form-item>
              <el-select v-model="addData.acreage" placeholder="请选择">
                <el-option
                  v-for="(v, i) in options4"
                  :key="i"
                  :label="v.label"
                  :value="v.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <el-form-item label="备注说明" :label-width="formLabelWidth">
          </el-form-item>
          <el-input
            v-model="addData.remark"
            autocomplete="off"
            class="shuoming"
          ></el-input>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialog = false" class="cancel">取 消</el-button>
          <el-button class="footer" type="primary" @click="add"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>

    <!-- 查看 -->
    <div class="detail">
      <el-dialog title="详情信息" :visible.sync="seeDialog">
        <el-form :model="seeData">
          <div class="form">
            <div class="detail-left">
              <el-form-item label="意向项目:" :label-width="formLabelWidth">
                <span>{{ seeData.projectName }}</span>
              </el-form-item>
              <el-form-item label="企业状态:" :label-width="formLabelWidth">
                <span v-if="seeData.state == 0">在业</span>
                <span v-if="seeData.state == 1">停业</span>
                <span v-if="seeData.state == 2">存续</span>
                <span v-if="seeData.state == 3">清算</span>
                <span v-if="seeData.state == 4">吊销</span>
                <span v-if="seeData.state == 5">注销</span>
                <span v-if="seeData.state == 6">迁入</span>
                <span v-if="seeData.state == 7">迁出</span>
              </el-form-item>
              <el-form-item label="企业所属地区:" :label-width="formLabelWidth">
                <span>{{ seeData.area }}</span>
              </el-form-item>
              <el-form-item label="企业联系人:" :label-width="formLabelWidth">
                <span>{{ seeData.contact }}</span>
              </el-form-item>
              <el-form-item label="企业规模:" :label-width="formLabelWidth">
                <span>{{ seeData.scale }}</span>
              </el-form-item>
              <el-form-item label="负责部门:" :label-width="formLabelWidth">
                <span>{{ seeData.dept }}</span>
              </el-form-item>
              <el-form-item label="申请办公面积:" :label-width="formLabelWidth">
                <span>{{ seeData.acreage }}</span>
              </el-form-item>
              <el-form-item label="备注说明:" :label-width="formLabelWidth">
                <span>{{ seeData.remark }}</span>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="企业名称:" :label-width="formLabelWidth">
                <span>{{ seeData.projectName }}</span>
              </el-form-item>
              <el-form-item label="行业大类:" :label-width="formLabelWidth">
                <span>{{
                  seeData.intentionPlanId == 1 ? '商业服务' : '娱乐服务'
                }}</span>
              </el-form-item>
              <el-form-item label="详细地址:" :label-width="formLabelWidth">
                <span>{{ seeData.contact }}</span>
              </el-form-item>
              <el-form-item label="联系电话:" :label-width="formLabelWidth">
                <span>{{ seeData.contactTel }}</span>
              </el-form-item>
              <el-form-item label="注册资本:" :label-width="formLabelWidth">
                <span>{{ seeData.registeredCapital }}</span>
              </el-form-item>
              <el-form-item label="招商经理:" :label-width="formLabelWidth">
                <span>{{ seeData.emp }}</span>
              </el-form-item>
              <el-form-item label="合同类型:" :label-width="formLabelWidth">
                <span>{{ seeData.contractType }}</span>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import time from '../utils/time';
export default {
  mixins: [time],
  data() {
    return {
      //行业大类
      options5: [
        {
          value: 0,
          label: '商业服务',
        },
        {
          value: 67,
          label: '娱乐服务',
        },
      ],
      //来源方式
      options6: [
        {
          value: '招商会',
          label: '招商会',
        },
        {
          value: '采购平台',
          label: '采购平台',
        },
      ],
      //意向登记选项
      options: [
        {
          value: 0,
          label: '喜羊羊',
        },
        {
          value: 1,
          label: '懒羊羊',
        },
      ],
      //招商经理选项
      options1: [
        {
          value: 'zs',
          label: 'zs',
        },
        {
          value: 'aaa',
          label: 'aaa',
        },
        {
          value: 'bbb',
          label: 'bbb',
        },
        {
          value: 'ccc',
          label: 'ccc',
        },
      ],
      //合同类型选项
      options2: [
        {
          value: '租赁合同',
          label: '租赁合同',
        },
        {
          value: '委托合同',
          label: '委托合同',
        },
      ],
      //负责部门选项
      options3: [
        {
          value: '招商部',
          label: '招商部',
        },
        {
          value: '财务部',
          label: '财务部',
        },
      ],
      //申请办公面积选项
      options4: [
        {
          value: 100,
          label: '100',
        },
        {
          value: 200,
          label: '200',
        },
        {
          value: 300,
          label: '300',
        },
        {
          value: 400,
          label: '400',
        },
      ],
      currentPage: 1,
      pageNum: 1,
      pageSize: 5,
      total: 0,
      tableData: [],
      formLabelWidth: '100px',
      seeDialog: false,
      addDialog: false,
      //搜索数据
      searchData: {
        business: '',
        projectName: '',
        sourceWay: '',
        date: [],
      },
      //新增数据
      addData: {
        acreage: '', //申请办公面积
        contractType: '', //合同类型
        dept: '', //负责部门
        emp: '', //招商经理
        startDate: '', //开始时间
        endDate: '', //结束时间
        intentionPlanId: '', //意向项目
        remark: '', //备注说明
        state: 0, //
      },
      //查看
      seeData: {
        id: 0,
        intentionPlanId: 0,
        dept: '',
        emp: '',
        acreage: 0,
        contractType: '',
        remark: '',
        state: 0,
        startDate: 0,
        endDate: 0,
        projectName: '',
        business: 0,
        area: '',
        contact: '',
        contactTel: '',
        registeredCapital: 0,
        sourceWay: '',
        scale: '',
      },
    };
  },
  methods: {
    //页码
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getData();
    },
    //渲染+渲染
    getData: function () {
      this.$axios({
        url: '/smart/intention/register/quit',
        method: 'post',
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        },
        data: {
          startDate: this.searchData.date[0],
          endDate: this.searchData.date[1],
          business: this.searchData.business,
          projectName: this.searchData.projectName,
          sourceWay: this.searchData.sourceWay,
        },
      }).then(({ data }) => {
        if (data.code == '00000') {
          if (data.data.pageInfo.list.length > 0) {
            this.tableData = data.data.pageInfo.list;
            this.total = data.data.pageInfo.total;
          } else {
            this.tableData = data.data.pageInfo.list;
            this.total = data.data.pageInfo.total;
            this.$message.error('暂无数据！');
          }
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //搜索
    search: function () {
      this.getData();
    },
    //重置
    reset: function () {
      this.searchData = {
        business: '',
        projectName: '',
        sourceWay: '',
        date: [],
      };
      this.getData();
    },
    //登记（新增）弹窗
    addOpen: function () {
      this.addData = {
        acreage: '', //申请办公面积
        contractType: '', //合同类型
        dept: '', //负责部门
        emp: '', //招商经理
        startDate: '', //开始时间
        endDate: '', //结束时间
        intentionPlanId: '', //意向项目
        remark: '', //备注说明
        state: 0,
      };
      this.addDialog = true;
    },
    //登记保存,有问题新增成功，没有数据
    add: function () {
      this.addData.acreage = Number(this.addData.acreage);
      this.addData.intentionPlanId = Number(this.addData.intentionPlanId);
      this.addData.startDate = this.timeTrans(Date.now(), 0);
      this.$axios({
        url: '/smart/intention/register/add',
        method: 'post',
        params: this.addData,
      }).then(({ data }) => {
        if (data.code == '00000') {
          this.addDialog = false;
          this.$message.success(data.msg);
          this.getData();
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //查看
    see(row) {
      this.seeDialog = true;
      this.$axios({
        url: '/smart/intention/register/quit/' + row.id,
      }).then(({ data }) => {
        if (data.code == '00000') {
          this.seeData = data.data;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //撤销
    revoke: function (row) {
      row.state = row.state == 0 ? 1 : 0;
      this.$axios({
        url: '/smart/intention/register/update/' + row.id + '/' + row.state,
        method: 'put',
      }).then(({ data }) => {
        if (data.code == '00000') {
          this.$message.success(data.msg);
          this.getData();
        } else {
          this.$message.error(data.msg);
        }
      });
    },
  },
  mounted: function () {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
#reg {
  height: 100px;
  color: black;
  padding: 20px;
}
.nav {
  display: flex;
  justify-content: space-between;
}

.head {
  background: white;
  height: 80px;
  width: 100%;
  margin: 20px 0px 20px 0;
  display: flex;
  align-items: center;
  border-radius: 6px;
}
.el-input,
.el-select {
  width: 180px;
  margin: 10px;
}
.el-button {
  padding: 11px;
  width: 80px;
  margin: 0 5px 0 10px;
}
.nav-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0 20px 0;
}
.search,
.add {
  background: #0bb197;
  border: 1px solid #0bb197;
  height: 40px;
}
.reset {
  background: white;
  color: #c0c4cc;
  border: 1px solid #dcdfe6;
}
.reset:hover {
  color: #0bb197;
}
.list {
  font-size: 14px;
  font-weight: 600;
  padding: 20px 0 10px 0;
}
.content {
  background: white;
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 6px;
}
.el-pagination {
  height: 100px;
  margin-top: 30px;
  text-align: right;
}
.form {
  display: flex;
  justify-content: space-between;
}
.dialog-footer {
  text-align: center;
  .footer {
    background: #0bb197;
    border: 1px solid #0bb197;
  }
  .cancel:hover {
    color: #0bb197;
    border: 1px solid #0bb197;
  }
}
</style>
<style lang="less">
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #0bb197;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #0bb197;
  color: #fff;
}
.detail {
  .el-dialog__header {
    background-color: #0bb197;
  }
  .el-dialog__title {
    color: white;
  }
  .el-form-item__label,
  .el-form-item__content {
    text-align: left;
    line-height: 25px;
    margin: 0px;
  }
  .el-form-item__content {
    text-align: right;
  }
}
.addReg {
  .el-input__inner,
  .el-form-item__label {
    height: 32px;
    line-height: 32px;
    text-align: left;
  }
  .el-form-item {
    margin-bottom: 0px;
  }
  .shuoming {
    width: 700px;
  }
}
</style>
